<template>
  <div class="app-container">
    <el-card class="box-card">
      <a>
        <img :src="courseDetail.courseCover" width="250px" height="180px"/>
      </a>
      <div class="box-item">
        <el-row style="font-size: 15px; line-height: 2em; color: #909399">
          <el-col :span="24">
            <el-link :underline="false" style="font-size: 20px; line-height: 2.5em">{{courseDetail.courseTitle}}</el-link>
            <el-button type="primary" size="medium" style="float: right; margin-right: 30px; font-size: 15px">修改</el-button>
          </el-col>
          <el-col :span="24">
            {{courseDetail.courseDescription}}
          </el-col>
          <el-col :span="8">
            课程类型:{{courseDetail.courseCategory}}
          </el-col>
          <el-col :span="8">
            课程等级:{{courseDetail.courseLevel}}
          </el-col>
          <el-col :span="8">
            课时:{{courseDetail.courseHour}}
          </el-col>
          <el-col :span="8">
            课程状态:{{courseDetail.courseStatus}}
          </el-col>
          <el-col :span="8">
            课程形式:{{courseDetail.courseForm}}
          </el-col>
          <el-col :span="8">
            必修/选修:{{courseDetail.courseRequired}}
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-tabs v-model="activeName" style="margin-top:30px;" type="border-card">
      <div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">
          <el-table-column label="学员姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="职位">
            <template slot-scope="scope">
              <span>{{ scope.row.userPosition }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系方式">
            <template slot-scope="scope">
              <span>{{ scope.row.userTelephone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="邮箱">
            <template slot-scope="scope">
              <span>{{ scope.row.userEmail }}</span>
            </template>
          </el-table-column>
          <el-table-column label="角色">
            <template slot-scope="scope">
              <span>{{ scope.row.userRole }}</span>
            </template>
          </el-table-column>
          <el-table-column label="公司">
            <template slot-scope="scope">
              <span>{{ scope.row.userCompany }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5,10]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="total"
          style="margin-top: 30px; margin-bottom: 20px; text-align: center;">
        </el-pagination>
      </div>
    </el-tabs>
  </div>
</template>

<script>
import { findCourseById } from '@/api/course'
import { findStudentByCid } from '@/api/course'

export default {
  name: 'Detail',
  data() {
    return {
      
      courseDetail: [],
      tableData:[],
      formInLine:{
        id:0,
        page:1,
        limit:5
      }
    }
  },
  
  created() {
    
    this.formInLine.id = this.$route.query.courseId
    this.getCourseData();

  },
  methods: {
    getCourseData(){
      findCourseById(this.formInLine.id).then((res) => {
        this.courseDetail = res.data
      }).catch((err) => {
        console.log(err);
      });
      findStudentByCid(this.formInLine).then(
        res => {
          console.log(res);
          this.tableData = res.data.list;
        }
      )
    }
  }
}
</script>

<style scoped>
.box-item{
  width: 75%;
  float: right;
}
.field-label{
  vertical-align: middle;
}
.box-card {
  width: 98%;
  max-width: 100%;
  margin: 20px auto;
}

.block {
  padding: 30px 24px;
}

.tag-item {
  margin-right: 15px;
}

</style>